<template>
    <div class="image-progress-detail">
        <el-dialog
                width="60%"
                :visible.sync="formShow"
                @close="handleClickDeal('cancel')"
                v-dialog-drag
                class="image-progress-detail"
                append-to-body
                :modal-append-to-body="false"
                :close-on-click-modal="false"
        >
      <span slot="title">
        <i class="iconfont icon-biangeng"></i>
       <span>{{title}}</span>
      </span>
            <el-tabs v-model="activeName" v-show="detailType!=='build'&&detailType!=='edit'">
                <el-tab-pane label="基本信息" name="first"></el-tab-pane>
            </el-tabs>
            <div class="g-dialog-scroll">
                <el-form
                        :model="formBaseData"
                        ref="formBaseData"
                        :rules="formBaseRules"
                        style="position: relative"
                        v-show="activeName == 'first'"
                >
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="实体类类名" prop="entityClass" :label-width="formlabelWidth">
                                <el-input
                                        size="small"
                                        placeholder
                                        v-model="formBaseData.entityClass"
                                        :disabled="detailType === 'check'"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="模块名称" prop="moduleName" :label-width="formlabelWidth">
                                <el-input
                                        size="small"
                                        placeholder
                                        v-model="formBaseData.moduleName"
                                        :disabled="detailType === 'check'"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                    <el-col :span="24">
                      <el-form-item label="前端路由" prop="path" :label-width="formlabelWidth">
                        <el-input
                          size="small"
                          placeholder
                          v-model="formBaseData.path"
                          :disabled="detailType === 'check'"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <!--流程操作提交按钮-->
                <template>
                  <el-button size="small" v-if="detailType === 'build'||detailType === 'edit'" type="primary" :loading="isLoading" @click="handleClickDeal('submit')"><i
                    class="iconfont icon-icon_save"></i> 保 存
                  </el-button>
                </template>

                <el-button size="small" @click="handleClickDeal('cancel')"><i class="iconfont icon-icon_cancel"></i> 取 消
                </el-button>


            </div>
        </el-dialog>
    </div>
</template>

<script>
  import titleRule from '@/api/wf/titleRule'
  import cmsPopoverTree from '@/views/components/cmsPopoverTree.vue'
  import msgUtil from '@/utils/msgUtil'
    export default {
        name: "locale-meeting-write-detail",
        components: {
          cmsPopoverTree,
        },
        props: {
            postDetail: {
                type: Object,
                default: {
                    show: false,
                    type: 'build',
                    params: {}
                }
            }
        },
        watch: {
            'activeName': {
                handler(val) {
                    console.log(val)
                },
                deep: true
            },
            async postDetail(value) {
                // 显示详情弹窗
                this.formShow = value.show
                // 初始化窗口参数
                this.activeName = 'first'
                // 详情类型
                this.detailType = value.type
                this.actionType = value.typeName
                // 详情id
                this.detailId = value.detailId?value.detailId:'';
              // 非新建详情时 获取详情
                if (this.detailType == 'build') {

                } else {
                    // 获取详情请求
                    this.getDetail()
                }
            }
        },
        data() {
            return {
                actionType: '',//窗口类型
                isLoading: false,
                detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
                detailId: '', // 当前详情的id
                formShow: false, // 表单展示
                formlabelWidth: '110px', // 表单左侧标题宽度
                title: '待办标题规则',
                activeName: 'first',
                formBaseData: {
                  entityClass: '',
                  moduleName: '',
                  titleRule: '',
                }, // 表单基本信息内容
                formBaseRules: {
                  entityClass: [
                        {required: true, message: '请填写' + '实体类类名', trigger: 'blur'},
                    ],
                  moduleName: [
                        {required: true, message: '请填写' + '模块名称', trigger: 'blur'},
                    ],
                  path: [
                    {required: true, message: '请填写' + '前端路由', trigger: 'blur'},
                  ]
                },
            }
        },
        created() {

        },
        methods: {
          getDetail() {
            titleRule.getOne(this.detailId).then(res => {
              if (res.code == 200) {
                this.formBaseData=res.data
              }else {
                msgUtil.error2(res.msg)
              }
            }).catch(() => {
              msgUtil.error2("获取详情信息失败")
            })

          },
            // 点击各个流程的按钮事件
            handleClickDeal(type, res) {
                console.log(type, res)
                switch (type) {
                    // 取消，关闭窗口
                    case 'cancel':
                        // 重置表单验证
                        this.$refs['formBaseData'].resetFields()
                        // 清空表单内容
                        this.formBaseData = {
                          entityClass: '',
                          moduleName: '',
                          titleRule: '',
                        }
                        // 关闭弹窗
                        this.formShow = false
                        break
                    // 保存
                    case 'submit':
                        // 表单验证
                        this.$refs['formBaseData'].validate((valid) => {
                            if (valid) {
                                this.isLoading = true
                                // 提交详情
                                this.submit(() => {
                                  this.formShow = false
                                  this.$emit('reloadList')
                                  this.$notify({
                                    title: '待办标题规则保存成功',
                                    type: 'success',
                                    duration: 1500
                                  })
                                })
                            }
                        })
                        break
                    // 删除
                    case 'delete':
                        this.$prompt('删除理由', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消'
                        })
                            .then(({value}) => {
                                if (value === null || value === '') {
                                    this.$messageError('请填写删除理由后重试')
                                    this.isLoading = false
                                    return
                                }
                                this.sealDealHttp(
                                    res.url,
                                    ``,
                                    {
                                        id: this.detailId,
                                        description: value
                                    },
                                    () => {
                                        this.$messageSuccess('删除成功!')
                                        this.formShow = false
                                        // 传值给父组件刷新列表
                                        this.$emit('reloadList')
                                        let userId = this.$store.getters.getLoginMessage().user.id;
                                        this.$bus.$emit('Ajax', localStorage.getItem('outSelectedProject_' + userId));
                                    }
                                )
                            })
                            .catch(() => {
                                console.log('请求出现错误',);
                            })
                        break
                }
            },
            submit(callback) {
                this.isLoading = true;
                titleRule.add(this.formBaseData).then(res => {
                  if (res.code === 200) {
                    if (callback) callback();
                  }else {
                    msgUtil.error2(res.data.message)
                  }
                }).catch((response) => {
                  this.$notify({
                    title: '待办标题规则保存失败',
                    type: 'error',
                    duration: 2500
                  })
                }).finally((response) => {
                  this.isLoading = false
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .image-progress-detail {
        .el-select.half {
            width: 250px;
        }

        .el-select.fill {
            width: 800px;
        }

        .contract-ele {
            //   width: 280px;
            width: 100%;
        }

        .el-input .el-select {
            width: 130px;
        }

        .fee_add {
            color: #008fe0;
            border-color: #008fe0;
            float: right;
            margin-bottom: 10px;
        }

        .dialog-section-title {
            font-size: 16px;
            font-weight: bold;
        }

        .dialog-upload-type {
            font-size: 14px;
            color: #008fe0;
            margin-left: 50px;
        }

        .contractNum {
            position: absolute;
            top: 0;
            right: 20px;

            p {
                color: #a71c1c;
            }
        }

        .icon-add {
            position: absolute;
            top: 0;
            right: 0;
            color: #008fe0;
            font-size: 30px;
            cursor: pointer;
        }

        .icon-subtract {
            position: absolute;
            top: 0;
            right: 0;
            color: #008fe0;
            font-size: 30px;
            cursor: pointer;
        }

        .form-tip {
            font-size: 12px;
            color: #a71c1c;
        }

        .scoreTXT {
            color: #008fe0;
            cursor: pointer;
        }

        .formTitle {
            font-weight: bold;
            font-size: 16px;
            margin: 15px 0;
        }

        .hoverTxt {
            color: #008fe0;
            cursor: pointer;
        }

        .upload-demo-fujian {
            width: 250px;
        }

        .upload-demo-zongtu {
            width: 300px;
        }

        .newArea {
            display: flex;
        }

        .pdf {
            display: flex;
            align-items: center;
            justify-content: left;
            cursor: pointer;
            flex-wrap: wrap;

            img {
                display: block;
                height: 20px;
                margin-right: 15px;
            }
        }

        .pdfItem {
            display: flex;
            position: relative;
            justify-content: space-between;
            padding-bottom: 5px;
            align-items: center;

            width: 100%;
            height: 40px;

            .pdfBox {
                padding-top: 5px;
                display: flex;
                justify-content: space-between;
                width: 100%;
                align-items: center;

                .content {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: flex;
                    align-items: center;
                    flex: 1;
                }
            }

            .buttonG {
                display: flex;
            }
        }

        .btnGroup {
            display: flex;
            align-items: center;
            justify-content: left;
            flex-wrap: wrap;
            padding-top: 5px;

            button {
                margin-left: 10px !important;
                margin-bottom: 5px !important;
            }

        }

        .flexTitle {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .btnGroupAA {
            width: 47px;
        }
    }
</style>
